<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <v-a></v-a>
        <v-b></v-b>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>

    //Object.create 实现对象级别的继承
    //vue源码: VueComponent.prototype = Object.create(Vue.prototype)
    //         VueComponent.prototype.__proto__ = Vue.prototype


    // 对象的隐式原型 指向其构造函数的 显示原型
    // 原型链: 隐式原型链
    /*vue组件的原型链:
        vue组件.__proto__
            VueComponent.prototype.__proto__
                Vue.prototype.__proto__
                    Object.prototype.__proto__
                        null*/

    Vue.config.productionTip=false;
    Vue.prototype.$bus=new Vue()
    new Vue({
        el:"#app",
        components:{
            "v-a":{
                template:`<span @click="clickFn">v-a组件</span>`,
                data(){
                  return {
                      msg:"msg from v-a"
                  }
                },
                methods:{
                    clickFn(){
                        this.$bus.$emit("msg",this.msg)
                    }
                }
            },
            "v-b":{
                template:`<span>{{msg}}</span>`,
                data(){
                  return {
                      msg:"v-b组件"
                  }
                },
                mounted(){
                    //this.$bus.$emit("msg")
                    this.$bus.$on("msg",(msg)=>{
                        this.msg = msg
                    })
                }
            }
        }
    })

</script>
</html>